<template>
	<view class="content myData-content1" >
		<view class="myData-box">
			<!-- <h3 class="myData-title">基本资料</h3> -->
			<p class="j-data">发票状态：<span style="color:#ee5c5c">已开</span> </p>
			<p class="j-data">订单状态：待支付</p>
			<p class="j-data">订单号：200208025265525441</p>
			<p class="j-data">下单时间：2020-08-02 12：00：00</p>
			<p class="j-data">发票内容：商品明细</p>
			<p class="j-data">发票抬头：<span class="button" v-for="(item,index) in buttonList" :class="item.addClass">{{item.name}}</span></p>
		</view>
		<view class="myData-box">
			<view class="login-box">
				<view class="login-item">
					<span class="input-text">单位名称</span>
					<input  class="login-input" type="text" placeholder-style="color:#888888;" placeholder="姓名" >
				</view>
				<view class="login-item">
					<span class="input-text">纳税识别号</span>
					<input  class="login-input" type="text" placeholder-style="color:#888888;" placeholder="手机号码" >
				</view>
				<view class="login-item">
					<span class="input-text">收票人手机号</span>
					<input  class="login-input" type="text" placeholder-style="color:#888888;" placeholder="邮箱地址" >
				</view>
				<view class="login-item">
					<span class="input-text">收票人邮箱</span>
					<input  class="login-input" type="text" placeholder-style="color:#888888;" placeholder="邮箱地址" >
				</view>
			</view>
		</view>
		<!-- <view class="myData-box">
			<h3 class="myData-title">兴趣爱好</h3>
			<view class="Interest">
				<view class="Interest-item" v-for="(item,index) in list" :class="item.addClass">{{item.name}}</view>
			</view>
		</view>
		<view class="myData-box">
			<h3 class="myData-title">个人介绍</h3>
			<p class="introduce">在很多场合我们都需要做自我介绍，参加各种聚会，来到新工作岗位，公司来了新同事等。一个好的自我介绍能够给人好的印象，能够让别人更深刻的记住你，从而带来更多的机会。今天我就来教大家怎么组织一个完整的自我介绍。</p>
		</view> -->
		<view class="edit-button" @tap="back">提交</view>
	</view>
</template>

<script>
	
	export default {
		computed:{},
		components: {},
		data(){
			return{
				buttonList:[
					{name:'单位',addClass:'active'},
					{name:'个人',addClass:''},
				],
				list:[
					{name:'家用电器',addClass:''},
					{name:'手机/数码',addClass:''},
					{name:'电脑/办公',addClass:''},
					{name:'运动健康',addClass:''},
					{name:'逛街购物',addClass:''},
					{addClass:'addItem'}
				]
				
			}
		},
		onLoad(options) {
			
		},
		onReady(){

		},
		methods:{
			edit(){
				uni.navigateTo({
                    url:'editData',
                });
			},
			back(){
				uni.navigateBack({
				    delta: 1
				});
			},
			actionSheetTap() {
				//this.$refs.showshare.open()
				uni.showActionSheet({
					title:'确定退出当前账号',
					itemList: ['退出登录'],
					itemColor:'#F95E5A',
					success: (e) => {
						console.log(e.tapIndex);
						uni.showToast({
							title:"点击了第" + e.tapIndex + "个选项",
							icon:"none"
						})
					}
				})
			},
			change(){		

			}
		}
	}
</script>

<style lang="less">

	.myData-content1{
		padding:0;
		width:100%;
		height:100%;
		background:#fff;
		overflow:hidden;
		.edit-button{
			width:670rpx;
			margin:40rpx auto;
			border-radius:50rpx;
			height:90rpx;
			line-height:90rpx;
			text-align:center;
			margin-top:80rpx;
			font-size:32rpx;
			color:#ffffff;
			background-color:#ee5c5c;
		}
		.myData-box{
			width:100%;
			padding:0 35rpx;
			margin-top:40rpx; 
			box-sizing:border-box;
			.login-box{
				width:100%;
				box-sizing:border-box;
				margin:0 auto;
				
				border:1px solid #f0f0f0;
				border-radius:10rpx;
				overflow:hidden;
				
				.login-item{
					width:100%;
					height:100rpx;
					border-bottom:1px solid #f0f0f0;
					display:flex;
					align-items:center;
					background:#ffffff;
					.login-input{
						width:calc(100% - 150rpx);
						height:100rpx;
						font-size:28rpx;
						color:#666666;
						box-sizing:border-box;
						padding-left:40rpx;
						line-height:100rpx;
					}
					.login-input1{
						width:calc(100% - 210rpx);
					}
					.iconyouEdit{
						width:60rpx;
						height:100rpx;
						line-height:100rpx;
						text-align:left;
						font-size:32rpx;
						color:#888888 !important;
					}
					.input-text{
						width:150rpx;
						height:100rpx;
						display:block;
						box-sizing:border-box;
						padding-left:30rpx;
						line-height:100rpx;
						text-align:center;
						font-size:28upx;
						color:#666666;
					}
				}
				.login-item:last-child{
					border:0;
				}
			}
			.introduce{
				line-height:40rpx;
				width:100%;
				box-sizing:border-box;
				padding-left:30rpx;
				font-size:30rpx;
				color:#666666;
			}
			.j-data{
				line-height:70rpx;
				width:100%;
				box-sizing:border-box;
				padding-left:30rpx;
				font-size:30rpx;
				color:#666666;
				display:flex;
				align-items:center;
				.button{
					width:140rpx;
					height:50rpx;
					border-radius:6rpx;
					line-height:46rpx;
					box-sizing:border-box;
					border:1px solid #888888;
					color:#888888;
					font-size:30rpx;
					text-align:center;
					display:block;
					margin-right:10rpx;
				}
				.active{
					border:1px solid #ee5c5c;
					color:#ee5c5c;
				}
			}
			.myData-title{
				line-height:40rpx;
				font-size:32rpx;
				color:#666666;
				font-weight:500;
				margin-bottom:20rpx;
			}
			.Interest{
				display:flex;
				justify-content:space-between;
				flex-wrap:wrap;
				width:100%;
				box-sizing:border-box;
				padding-left:30rpx;
				.Interest-item{
					width:200rpx;
					height:60rpx;
					line-height:60rpx;
					text-align:center;
					border-radius:30rpx;
					font-size:28rpx;
					color:#ffffff;
					background:#0079fe;
					margin-bottom:20rpx;
				}
			}
		}

	}

</style>
